<!-- 旅客信息 -->
<template>
  <view :style="{height : pageHeight + 'px'}" class="content">
    <view class="searchColumn">
      <tui-loading v-if="loadingTips" :isMask="true"></tui-loading>
      <tui-searchbar :value="searchValue" backgroundColor="#FFFFFF" placeholder="搜索人员" @cancel="getMemberList"
                     @search="searchMember"></tui-searchbar>
    </view>
    <view class="operationMenu">
      <view class="handleOpt">
        <view class="add" @tap="addPassenger">添加</view>
        <view class="importPassenger" @tap="exprotFile">导入</view>
      </view>
      <view class="downTemplate" @tap="downModel">
        下载导入模板
      </view>
    </view>
    <view class="touristList">
      <view class="listTitle">
        游客列表
      </view>
      <scroll-view :show-scrollbar="false" scroll-y="true" @scrolltolower="loadMore">
        <view class="listWarp">
          <view v-for="(item,index) in dataList" :key="index" class="listItem">
            <view class="info">
              <view class="itemNamePhone">
                <view class="itemName">
                  <image class="Icon"
                         mode="aspectFit"
                         src="https://echengtuhua.oss-cn-shenzhen.aliyuncs.com/passengerIcon.png"></image>
                  {{ item.name }}
                </view>
                <view class="itemPhone">
                  <image class="phoneIcon"
                         mode="aspectFit" src="https://echengtuhua.oss-cn-shenzhen.aliyuncs.com/phoneIcon.png"></image>
                  {{ item.tel || '-' }}
                </view>
              </view>
              <view class="IdCard">
                <image class="Icon"
                       mode="aspectFit" src="https://echengtuhua.oss-cn-shenzhen.aliyuncs.com/IdCard.png"></image>
                {{ item.idCard || '-' }}
              </view>
              <view class="parentsPhone">
                <image mode="aspectFit"
                       src="https://echengtuhua.oss-cn-shenzhen.aliyuncs.com/phoneIcon.png"></image>
                家长手机:{{ item.parentTel || '-' }}
              </view>
            </view>
            <view class="delete" @tap="delectMember(item)">
              删除
            </view>
          </view>
        </view>
        <!-- 删除旅客弹窗 -->
        <tui-modal :show="delectModal" content="确定删除该旅客吗？" title="提示" @cancel="hideModal"
                   @click="handleClick"></tui-modal>
        <!-- 下载模板弹窗 -->
        <tui-modal :button="downModalBtn" :show="downModal" content="由于微信文件下载限制,复制文件链接到浏览器下载"
                   title="提示"
                   @cancel="hideDownModal" @click="isCopy"></tui-modal>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import {
  getMemberList,
  delectMember
} from '@/api/tourplan.js'
import {
  baseUrl
} from "@/common/unit.js";
import {
  upFile
} from '@/api/upload.js'

export default {
  data() {
    return {
      pageHeight: 750,
      itineraryId: 0, //行程id
      loadingTips: false, //加载提示
      searchValue: null, //搜索值
      dataList: [],
      pageParams: {
        total: 0,
        pageNumber: 1,
        pageSize: 10,
      },
      delectModal: false,
      deleteInfo: {},
      downModal: false,
      downModalBtn: [{
        text: "一键复制",
        type: "primary",
        plain: false
      }],
      lineType: null,
    }
  },
  onLoad: function (options) {
    const that = this
    uni.getSystemInfo({
      success: function (res) {
        that.pageHeight = res.windowHeight
      }
    });
    that.itineraryId = options.itineraryId
    that.lineType = options.lineType
  },
  onShow() {
    const that = this
    that.getMemberList()
  },
  methods: {
    //获取旅客列表
    getMemberList() {
      const that = this
      that.loadingTips = true
      getMemberList({
        pageNumber: 1,
        pageSize: that.pageParams.pageSize,
        itineraryId: that.itineraryId
      }).then(res => {
        that.pageParams.total = res.total
        that.dataList = res.records
        that.loadingTips = false
      })
    },
    //添加旅客信息
    addPassenger() {
      uni.navigateTo({
        url: '/pages/tourplan/passengerInfo/addPassenger/addPassenger?itineraryId=' + this
            .itineraryId + '&lineType=' + this.lineType
      })
    },

    //删除旅客
    delectMember(item) {
      this.delectModal = true
      this.deleteInfo = item
    },
    //隐藏弹窗
    hideModal() {
      this.delectModal = false
    },

    //确认删除
    handleClick(e) {
      const that = this
      let index = e.index
      if (index === 0) {
        console.log('取消');
      } else {
        //删除
        that.delect()
      }
      this.hideModal();
    },

    //删除旅客信息
    delect() {
      const that = this
      delectMember([that.deleteInfo.id]).then(res => {
        that.getMemberList()
      })

    },

    //触底加载更多信息
    loadMore() {
      const that = this
      if (that.dataList.length < that.pageParams.total) {
        console.log('已加载更多...')
        that.pageParams.pageNumber++
        getMemberList({
          pageNumber: that.pageParams.pageNumber,
          pageSize: that.pageParams.pageSize,
          itineraryId: that.itineraryId
        }).then(res => {
          that.pageParams.total = res.total
          if (that.dataList.length < that.pageParams.total) {
            for (let i = 0; i < res.records.length; i++) {
              that.dataList.push(res.records[i])
            }
          }
          that.loadingTips = false
        })
      }
    },

    //搜索成员
    searchMember(e) {
      const that = this
      that.searchValue = e.value
      if (that.searchValue) {
        console.log('搜索中')
        that.loadingTips = true
        getMemberList({
          pageNumber: 1,
          pageSize: 99,
          query: that.searchValue,
          itineraryId: that.itineraryId
        }).then(res => {
          that.dataList = res.records
          that.loadingTips = false
        })
      } else {
        that.getMemberList()
      }
    },

    //导入
    exprotFile() {
      const that = this
      upFile(that.itineraryId).then(res => {
        let {
          code
        } = res;
        if (code === 200) {
          uni.showToast({
            title: '导入成功',
            icon: 'success',
            duration: 3000
          })
          that.getMemberList()

        } else {
          uni.showToast({
            title: '导入失败',
            icon: 'error',
            duration: 3000
          })
        }
      })

    },
    //下载模板
    downModel() {
      const that = this
      that.downModal = true
    },
    //隐藏下载模板提示弹窗
    hideDownModal() {
      const that = this
      that.downModal = false
    },
    //复制下载地址
    isCopy() {
      uni.setClipboardData({
        data: 'https://hzdaoziji.oss-cn-hangzhou.aliyuncs.com/file6787d7804817413d90191937266210be.xls',
        success: function () {
          uni.showToast({
            title: '复制成功',
            icon: 'none',
            duration: 2000
          })
        }
      });
      this.downModal = false
    },
  }
}
</script>

<style>
@import url("passengerInfo.css");
</style>
